<!--
 * @Author: your name
 * @Date: 2022-02-21 10:08:10
 * @LastEditTime: 2022-06-20 10:21:57
 * @LastEditors: Aaron
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \ias_ui\src\views\coi\approve\components\searchHead2.vue
-->
<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title"> <i class="el-icon-search" />搜索栏 </template>
        <div class="head-container">
          <el-form class="searchform" :inline="true" size="mini" label-width="auto">
            <el-form-item label="建品供应商号">
              <el-input
                v-model="searchData.buildVendorNbrList"
                type="textarea"
                placeholder="请输入建品供应商号，多个回车换行隔开"
                clearable
                style="width: 200px"
              />
            </el-form-item>

            <el-form-item label="部门">
              <el-input v-model="searchData.deptNbr" type="textarea" placeholder="请输入部门，多个回车换行隔开" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="UPC">
              <el-input v-model="searchData.upcList" type="textarea" placeholder="请输入UPC，多个回车换行隔开" clearable style="width: 200px" />
            </el-form-item>

            <el-form-item label="UPC(不含检验码)">
              <el-input v-model="searchData.skuList" type="textarea" placeholder="请输入UPC(不含检验码)，多个回车换行隔开" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model.trim="searchData.skuName" placeholder="请输入商品说明" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchData.mainStatusList" multiple style="width: 200px" placeholder="请选择建品状态" clearable>
                <el-option v-for="item in commodityTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="isbrandName" label="品牌名称">
              <el-input v-model.trim="searchData.brandName" placeholder="请输入品牌名称" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="Fineline">
              <el-input v-model.trim="searchData.finelineNbrList" type="textarea" placeholder="输入Fineline，多个回车换行隔开" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchData.createByDate"
                style="width: 200px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="更新时间">
              <el-date-picker
                v-model="searchData.updataByDate"
                style="width: 200px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                class="filter-item"
                size="mini"
                icon="el-icon-download"
                style="float: right; margin-left: 0px"
                type="primary"
                round
                @click="$emit('download')"
              >
                导出
              </el-button>
              <el-button size="mini" type="primary" style="float: right; margin-left: 0px" icon="el-icon-refresh" round @click="$emit('reset')">重置</el-button>
              <el-button size="mini" type="primary" style="float: right; margin-left: 0px" icon="el-icon-search" round @click="$emit('search')">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { commodityTypes } from '@/views/coi/commonJs/dictionary'

export default {
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    requestType: {
      type: Number || null,
      default: null
    },
    isbrandName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: '1',
      commodityTypes: commodityTypes
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding-bottom: 0;
}
</style>
